<template>
  <div class="app-container">
    <router-view v-slot="{ Component }">
      <component :is="Component" :key="$route.fullPath" />
    </router-view>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const showDebug = ref(false);
const currentUrl = ref('');

// 强制更新函数
const forceUpdate = () => {
  const path = window.location.pathname;
  currentUrl.value = path;
  
  if (path.includes('/appOrder/')) {
    const subPath = '/' + path.split('/appOrder/')[1];
    console.log('强制更新路由到:', subPath);
    router.push(subPath);
  }
};

// 处理URL变化的函数
const handleUrlChange = () => {
  const path = window.location.pathname;
  currentUrl.value = path;
  
  if (path.includes('/appOrder/')) {
    const subPath = '/' + path.split('/appOrder/')[1];
    console.log('App.vue提取子路径:', subPath);
    
    router.push(subPath)
  }
};

onMounted(() => {
  console.log('App.vue已挂载, 当前URL:', window.location.href);
  
  if (window.__MICRO_APP_ENVIRONMENT__) {
    console.log('运行在微前端环境中');
    
    // 初始化时处理URL
    nextTick(() => {
      handleUrlChange();
    });
    
    // 清理函数
    onUnmounted(() => {
      console.log('App.vue已卸载，事件监听已清理');
    });
  }
});
</script>

<style>
.app-container {
  width: 100%;
  height: 100%;
}

.debug-panel {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px;
  border-radius: 5px;
  z-index: 9999;
}
</style>